<template>
  <el-row>
    <el-col :span="22" :offset="1">

      <!--卡片shart-->
      <el-card class="box-card" style="padding: 0 15px;">

        <!--卡片第1行-->
        <div style="line-height:40px;height:40px;paddign:0 20px;padding-bottom:20px;border-bottom: 3px solid #F1F1F1;">

          <el-row>
            <el-col :span="3" :offset="0">
              诊所收入趋势
            </el-col>
            <el-col :span="1" :offset="17">
              <el-tag v-for="item in items1"
                      :key="item.label"
                      :type="item.type"
                      effect="dark">
                {{ item.label }}
              </el-tag>
            </el-col>
            <el-col :span="1" :offset="1">
              <el-tag v-for="item in items2"
                      :key="item.label"
                      :type="item.type"
                      effect="plain">
                {{ item.label }}
              </el-tag>
            </el-col>
          </el-row>
        </div>

        <!--卡片第2行-->
        <div style="margin:0 20px;border: 1px solid white">
          <el-row>
            <el-col :span="3" :offset="0" style="margin-bottom:-35px;line-height:40px;height:40px;border: 1px solid white">
              <div style="margin-left:-70px;margin-top:10px;margin-bottom:-35px;font-size:10px;">单位（元）</div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24" :offset="0">
              <div style="width:800px">
                <!--折线图-->
                <chart ref="chart1" :options="orgOptions" :auto-resize="true"></chart>
              </div>
            </el-col>
          </el-row>
        </div>

      </el-card>
      <!--卡片end-->

    </el-col>
  </el-row>
</template>

<script>
  export default {
    name: "summary.vue",
    data () {
      return {
        items1: [
          { type: 'danger', label: '近7天' }
        ],
        items2: [
          { type: 'info', label: '近30天' }
        ],
        orgOptions: {},
      }
    },
    mounted() {
      this.orgOptions = {
        xAxis: {
          type: 'category',
          data: ['12-01', '12-02', '12-03', '12-04', '12-05', '12-06', '12-07']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [3100, 2514, 3611, 5000, 3415, 1958, 4054],
          type: 'line',
          smooth: true
        }]
      }
    }
  }
</script>

<style scoped>

</style>
